<!--
 * @Description: 车辆选择
 * @Autor: 何兴家
 * @Date: 2020-11-25 09:30:53
 * @LastEditors: 何兴家
 * @LastEditTime: 2021-01-25 14:33:41
-->
<template>
  <div>
    <TopFilter :list="topFilterList" :cols="3" :labelWidth="100" @filterChange="handleSearch"></TopFilter>
    <FilterTable
      ref="table"
      :columns="tableColumns"
      :fetchapi="fetchapi"
      :params="fetchParams"
      selectionType="single"
      :datakey="'rows'"
      height="auto"
      :maxHeight="350"
      :onColumnsChange="columns => (this.tableColumns = columns)"
      :onSyncTableData="handleSyncTableData"
      :onRowSelectChange="handleTableRowSelect"
    ></FilterTable>
    <div class="btnWrap">
      <el-button @click="handleCancel">取消</el-button>
      <el-button type="primary" @click="handleConfirm">确定</el-button>
    </div>
  </div>
</template>

<script>
import { notifyAction } from '@/utils';

import { queryRepairVehicleList } from '@/api/repair/common';

export default {
  data() {
    return {
      topFilterList: this.createTopFilterList(),
      tableColumns: this.createTableColumns(),
      fetchapi: queryRepairVehicleList,
      fetchParams: { xhrAbort: true },
      selectedTableRow: [] // 选中的table列表
    };
  },
  methods: {
    createTopFilterList() {
      return [
        {
          type: 'INPUT',
          label: '车牌号',
          fieldName: 'license'
        },
        {
          type: 'INPUT',
          label: 'VIN',
          fieldName: 'vin'
        },
        {
          type: 'INPUT',
          label: '车主',
          fieldName: 'ownerName'
        },
        {
          type: 'INPUT',
          label: '手机号',
          fieldName: 'mobile'
        }
      ];
    },
    createTableColumns() {
      return [
        {
          title: '序号',
          dataIndex: 'index',
          width: 70,
          sorter: true,
          render: props => {
            return <span>{props.row.index + 1}</span>;
          }
        },
        {
          title: '车牌号',
          dataIndex: 'LICENSE',
          sorter: true,
          showOverflowTooltip: true
        },
        {
          title: 'VIN',
          dataIndex: 'VIN',
          width: 180,
          sorter: true,
          showOverflowTooltip: true
        },
        {
          title: '发动机号',
          dataIndex: 'ENGINE_NO',
          showOverflowTooltip: true,
          sorter: true
        },
        {
          title: '车主',
          dataIndex: 'OWNER_NAME',
          width: 180,
          showOverflowTooltip: true,
          sorter: true
        },
        {
          title: '品牌',
          dataIndex: 'BRAND_NAME',
          sorter: true,
          showOverflowTooltip: true
        },
        {
          title: '车系',
          dataIndex: 'SERIES_NAME',
          sorter: true,
          showOverflowTooltip: true
        },
        {
          title: '车型',
          dataIndex: 'MODEL_NAME',
          sorter: true,
          showOverflowTooltip: true
        }
        // {
        //   title: '上次出厂里程',
        //   dataIndex: 'MILEAGE',
        //   sorter: true,
        //   showOverflowTooltip: true
        // }
      ];
    },
    // 同步table数据
    handleSyncTableData(list) {
      list.forEach(item => {
        item.CHIEF_TECHNICIAN = item.TECHNICIAN; // 指定技师字段起了别名前端手动处理
      });
    },
    // 点击搜索
    handleSearch(e) {
      this.fetchParams = { xhrAbort: false, ...e };
    },
    // table选中变化
    handleTableRowSelect(list) {
      this.selectedTableRow = list;
    },
    // 点击确定
    handleConfirm() {
      if (!this.selectedTableRow.length) return notifyAction('请选择目标车辆', 'warning');
      this.$emit('onConfirm', this.selectedTableRow[0]);
    },
    // 点击取消
    handleCancel() {
      this.$emit('close');
    }
  }
};
</script>

<style scoped>
.btnWrap {
  position: absolute;
  left: 0px;
  bottom: 0px;
  right: 0px;
  z-index: 9;
  border-top: 1px solid rgb(233, 233, 233);
  padding: 10px 20px;
  background: rgb(255, 255, 255);
  text-align: right;
}
</style>
